<script setup>
import VxeTablePro from '@/components/VxeTablePro/index.vue'
// import { VxeTablePro } from '@/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
//  import { VxeTablePro } from '@cimom/ci-web-plugins-commom'
import { reactive,ref } from 'vue'
const gridOptions = reactive({
  data: [
      { id: '10001', name: 'Test1', role: 'Develop', sex: 'Man', num: '28', address: 'test abc' },
      { id: '10002', name: 'Test2', role: 'Test', sex: 'Women', num: '22', address: 'Guangzhou' },
      { id: '10003', name: 'Test3', role: 'PM', sex: 'Man', num: '32', address: 'Shanghai' },
      { id: '10004', name: 'Test4', role: 'Designer', sex: 'Women', num: '24', address: 'Shanghai' },
      { id: '10005', name: 'Test5', role: 'Develop', sex: 'Man', num: '42', address: 'Guangzhou' },
      { id: '10006', name: 'Test6', role: 'Test', sex: 'Women', num: '39', address: 'Shanghai' },
      { id: '10007', name: 'Test7', role: 'Develop', sex: 'Man', num: '46', address: 'Shanghai' },
      { id: '10008', name: 'Test8', role: 'PM', sex: 'Women', num: '49', address: 'Guangzhou' }
  ]
})
 const footerData = [
      { seq: '合计', num: '282' },
      { seq: '平均', num: '2.88' }
    ]
function currentRowChange(params){
  alert(params.row.name)
}
</script>

<template>
  <VxeTablePro
  @current-row-change="currentRowChange"
   :rowConfig="{
      isCurrent: true,
      isHover: true
  }" 
  :data="gridOptions.data"
   show-footer
   :footer-data="footerData"
     border
      stripe
      height="400"
      :column-config="{resizable: true}"
      :checkbox-config="{labelField: 'id', highlight: true, range: true}"
>
      <vxe-column field="seq" type="seq" width="70">
         <template #header="{ row }">
            <span style="color: blue;">andy</span>
        </template>
        <template #footer="{ row }">
          <span style="color: blue;">{{ row.seq }}</span>
        </template>
      </vxe-column>
      <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="num" title="Num">
        <template #footer="{ row }">
          <span style="color: red;">￥{{ row.num }}元</span>
        </template>
      </vxe-column>
</VxeTablePro>

</template>

<style scoped>

</style>
